<template>
  <div>
    <custom-table
      ref=" "
      :columns="columns"
      :query="queryParams"
      :head-btn="headBtn"
      :row-btn="rowBtn"
      :show-head-btn="['delete','flush']"
      :show-row-btn="['select','delete']"
      v-bind="$attrs"
      v-on="listeners"
      @tap-head-btn="onTapHeadBtn"
      @tap-row-btn="onTapRowBtn"
      @row-dblclick="onRowDbClick"
    >
    <!-- <template v-slot:address="{row}">
      <div style="color:red; background-color: aqua;">{{row.address}}内容</div>
    </template> -->
    </custom-table>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" @close="cancel">
  <el-form :model="form" ref="form">
    <el-form-item :label="item.label" :label-width="formLabelWidth" v-for="(item ,index) in form.data" :key="index" :prop="'data.' + index + '.name'" :rules="item.label == '检查类型名称'? rules.name:rules.content">
      <el-input v-model="item.name" style="width:60%;"  autocomplete="off"></el-input>
      <el-button style="margin-left:10px" v-if="index != 0" @click.prevent="removeDomain(index)">删除</el-button>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <el-button type="primary" @click="addInput">添加检查内容</el-button>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitAdd('form')">确 定</el-button>
  </div>
</el-dialog>
  </div>

</template>

<script>
import tableMixin from '@/utils/mixin/custom-table'
import curd from '@/api/curd'
import { showLoading, hideLoading } from '@/utils'
export default {
  data() {
    return {
      headBtn: [
        {
          name: '添加',
          // 类型
          type: 'primary',
          // 图标
          icon: 'el-icon-plus',
          // 权限
          // auth: this.getFullAuth('flush'),
          key: 'addInput'
          // confirm: '确认进行发送催收通知吗？'
        }
      ],
      columns: [
        { name: '名称', field: 'name', width: 150, required: true },
        // { name: '检查内容', field: 'content', width: 150, required: true },
        // { name: '地址', field: 'address', width: 150 },
        // { name: '图片', field: 'image', type: 'image', width: 150 },
        // { name: '链接', field: 'link', type: 'link', width: 150 },
        // { name: '状态', field: 'status', label: true, type: this.checkAuth('change') ? 'switch' : 'tag', opts: {} },
        { name: '添加时间', field: 'create_time' }
      ],
      dialogFormVisible: false,
      form: {
        data: [
          {
            name: '',
            label: '检查类型名称'
          },
          {
            name: '',
            label: '检查内容'
          }
        ]
      },
      rules: {
        name: [
          {
            required: true, message: '请输入名称'
          }
        ],
        content: [
          {
            required: true, message: '请输入检查内容'
          }
        ]
      },
      formLabelWidth: '120px',
      add_or_save: false
    }
  },
  components: {},
  mixins: [
    tableMixin
  ],
  computed: {
    rowBtn() {
      return [
        {
          name: '巡检内容',
          key: 'compile'
          // confirm: '确认进行发送催收通知吗？'
          // show(row) {
          //   return row.status === '待缴费'
          // }
        }
      ]
    }
  },
  props: {},
  filters: {},
  created() {
  },
  methods: {
    // 打开添加弹窗
    onTapHeadBtnAddInput() {
      // console.log('我被点击了')
      var that = this
      that.form = {
        data: [
          {
            name: '',
            label: '检查类型名称'
          },
          {
            name: '',
            label: '检查内容'
          }
        ]
      }
      that.add_or_save = false
      that.dialogFormVisible = true
    },
    // 添加输入框
    addInput() {
      var that = this
      // var content = 'content' + that.columns.length
      that.form.data.splice(that.form.data.length, 0, { name: '', label: '检查内容' })
      // console.log('添加', that.form.data)
    },
    // 提交表单
    submitAdd(form) {
      var that = this
      // console.log(form)
      // var data = that.form.data

      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log(that.form)

          that.add_or_save ? that.curd.post('saveDetail', that.form) : curd('polling_type').save(that.form)
          that.cancel()
          setTimeout(() => {
            this.onTapHeadBtnFlush({})
          }, 500)
          // return
        } else {
          // console.log(valid)
          return false
        }
      })

      //
    },
    // 取消弹窗
    cancel() {
      var that = this
      that.form = {
        data: [
          {
            name: '',
            label: '检查类型名称'
          },
          {
            name: '',
            label: '检查内容'
          }
        ]
      }
      this.$refs['form'].clearValidate()
      that.dialogFormVisible = false
    },

    // 移除内容
    removeDomain(e) {
      var that = this
      // console.log('我被点击了', e)
      that.form.data.splice(e, 1)
    },
    // 打开修改弹窗
    onTapRowBtnCompile(data) {
      var that = this
      console.log('我是修改按钮', data)
      showLoading('获取内容中...')
      this.curd.get('getDetail', data).then(res => {
        hideLoading()
        console.log('获取成功', res)
        that.form.data = res.data
        that.add_or_save = true
        this.dialogFormVisible = true
        // this.onTapHeadBtnFlush({})
      }, hideLoading)
    },

    // 取消双击编辑功能
    onRowDbClick() {

    }
  }

}
</script>

<style lang="scss">

</style>
